﻿@page "/card"
@using CardMaker.Library.Services
@using CardMaker.Library.Models
@using Microsoft.JSInterop
@inject ICardTemplateService _cardTemplateService
@inject ISideImageStorage _sideImageStorage
@inject ICardTemplateStorage _cardTemplateStorage
@inject IJSRuntime _jsRuntime
@inject ICardImageToUrlService _cardImageToUrlService
@inject IFrameImageStorage _frameImageStorage

@if (_isLoading) {
    <h1><Spinner></Spinner></h1>
} else {
    <div class="col-12 col-sm-6 col-lg-4 col-xl-2">
        @*<ImageViewer Url="@imagList[0]"/>
        <ImageViewer Url="@imagList[1]"/>*@
        <ListView TItem="string" Items="@imagList">
            <HeaderTemplate>
                <div>JSideImage</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <ImageViewer Url="@context"/>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
        </ListView>
        <BodyTemplate>
            <h5>框图</h5>
            <div class="images-item">
                <img src="@frameImg"/>
            </div>
        </BodyTemplate>
        @*<Card Color="Color.Primary" IsCenter="true">
            <HeaderTemplate>
                <h5>@_card.CardTemplateId</h5>
            </HeaderTemplate>

			
	        <HeaderTemplate>
		        <h5>@_card.CardTemplateId</h5>
	        </HeaderTemplate>
	        <BodyTemplate>
		        <h5>主图</h5>
		        <div class="image-item">
			        <ImageViewer Url="@mainImg" FitMode="ObjectFitMode.Cover"></ImageViewer>
		        </div>
		        <h5>副图1</h5>
		        <div class="image-item">
			        <ImageViewer Url="@sideImg1" FitMode="ObjectFitMode.Cover"></ImageViewer>
		        </div>
		        <h5>副图2</h5>
		        <div class="image-item">
			        <ImageViewer Url="@sideImg2" FitMode="ObjectFitMode.Cover"></ImageViewer>
		        </div>
	        </BodyTemplate>
        </Card>*@
    </div>
}

